<template>
  <div>
    <el-menu
        :default-active="$route.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#ff4500"
      >
        <el-menu-item index="/page/statement/productintro">产品介绍</el-menu-item>
        <el-menu-item index="/page/statement/productteam">开发团队</el-menu-item>
        <el-menu-item index="/page/statement/productculture">团队文化</el-menu-item>
        <el-menu-item index="/page/statement/feedback">意见反馈</el-menu-item>
        <el-menu-item index="/page/statement/infro">提交信息</el-menu-item>
      </el-menu>
      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: '',
  props: {},
  components: {
  },
  data () {
    return {
    }
  },
  methods: {
  },
  watch: {
    // 监听路由变化
    $route () {
      const i = this.$route.path
      setTimeout(() => {
        this.$refs.menu.activeIndex = i
      }, 100)
    }
  }

}
</script>

<style scoped lang="less">
/deep/.el-menu.el-menu--horizontal{
  margin-top: 20px;
    width: 500px;
  -moz-box-shadow: 2px 2px 10px #909090;/*firefox*/
    -webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/
    box-shadow:2px 2px 10px #909090;/*opera或ie9*/
}
</style>
